<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>具体方案参考</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 配置Tailwind -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3B82F6',
            success: '#10B981',
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .input-focus {
        @apply ring-2 ring-primary ring-offset-2;
      }
      .bounce-effect {
        @apply transition-transform active:scale-95;
      }
    }
  </style>
</head>
<body class="bg-gradient-to-b from-blue-50 to-indigo-50 min-h-screen font-sans text-gray-800">
  <div class="container mx-auto px-4 py-8 max-w-md">
    <!-- 游戏标题 -->
    <div class="text-center mb-8">
      <h1 class="text-[clamp(1.5rem,5vw,2rem)] font-bold text-primary mb-2">
        <i class="fa fa-pencil-square-o mr-2"></i>请填写接头暗号
      </h1>
      <p class="text-gray-500">填写空缺的字，完成接头！</p>
    </div>
    
    <!-- 游戏内容区域 -->
    <div class="bg-white rounded-xl shadow-md p-6 mb-6 transform transition-all duration-300">
      <div id="sentences-container" class="space-y-6">
        <!-- 句子会通过JS动态生成 -->
      </div>
    </div>
    
    <!-- 操作按钮 -->
    <div class="flex gap-4">
      <button id="check-btn" class="flex-1 bg-primary text-white py-3 px-4 rounded-lg font-medium shadow hover:bg-primary/90 transition-colors bounce-effect flex items-center justify-center">
        <i class="fa fa-check mr-2"></i> 确认接头
      </button>
      <button id="reset-btn" class="bg-gray-200 text-gray-700 py-3 px-4 rounded-lg font-medium hover:bg-gray-300 transition-colors bounce-effect">
        <i class="fa fa-refresh"></i>
      </button>
    </div>
  </div>
  
  <!-- 成功弹窗 -->
  <div id="success-modal" class="fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4 opacity-0 pointer-events-none transition-opacity duration-300">
    <div class="bg-white rounded-2xl p-6 max-w-md w-full transform scale-95 transition-transform duration-300">
      <div class="text-center">
        <div class="w-16 h-16 bg-success/20 rounded-full flex items-center justify-center mx-auto mb-4">
          <i class="fa fa-check text-2xl text-success"></i>
        </div>
        <h2 class="text-xl font-bold mb-3">恭喜你接头成功！</h2>
        <div class="mb-4 rounded-lg overflow-hidden">
          <!-- 成功后显示的图片 -->
          <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/OVz3e5JP0pnWxp8RFsmQfy99Jnvib1CQicmh6iazBusuEb1Cn8XRa7tMbnYjxib0P5ofVvsUnsmt0oerjoB4rG7hUQ/640?wx_fmt=jpeg" alt="公众号二维码图片" class="w-full h-auto">
        </div>
        <button id="close-modal" class="bg-primary text-white py-2 px-6 rounded-lg font-medium hover:bg-primary/90 transition-colors bounce-effect">
          再接一次
        </button>
      </div>
    </div>
  </div>

  <script>
    // 游戏数据 - 这里可以自定义要填写的内容
    const gameData = [
      {
        sentence: "中国人向来以成败论[英雄]，",
        answers: ["英雄"]
      },
      {
        sentence: "成了就是高瞻远瞩能说会[道]，",
        answers: ["道"]
      },
      {
        sentence: "败了就是油嘴滑舌好高骛[远]，",
        answers: ["远"]
      },
      {
        sentence: "可天下英雄如过江之[鲫]，",
        answers: ["鲫"]
      },
      {
        sentence: "人中龙凤尚且举步维艰，",
        answers: [""]
      },
      {
        sentence: "何况我们？",
        answers: [""]
      },
      {
        sentence: "唯有用一生作为[赌]注，",
        answers: ["赌"]
      },
      {
        sentence: "改变家族[命]运，",
        answers: ["命"]
      }
    ];
    
    // DOM元素
    const sentencesContainer = document.getElementById('sentences-container');
    const checkBtn = document.getElementById('check-btn');
    const resetBtn = document.getElementById('reset-btn');
    const successModal = document.getElementById('success-modal');
    const closeModal = document.getElementById('close-modal');
    
    // 初始化游戏
    function initGame() {
      sentencesContainer.innerHTML = '';
      
      // 遍历每个句子，生成带输入框的HTML
      gameData.forEach((item, index) => {
        let processedSentence = item.sentence;
        let answerIndex = 0;
        
        // 替换[]中的内容为输入框
        const regex = /\[.*?\]/g;
        processedSentence = processedSentence.replace(regex, (match) => {
          const inputId = `input-${index}-${answerIndex}`;
          const inputLength = item.answers[answerIndex].length;
          answerIndex++;
          
          // 根据答案长度动态调整输入框宽度
          const inputWidth = Math.max(60, inputLength * 28);
          
          return `<input type="text" 
                        id="${inputId}" 
                        data-answer="${item.answers[answerIndex - 1]}"
                        class="mx-1 px-2 py-1 border-b-2 border-gray-300 focus:outline-none focus:border-primary transition-colors text-center font-medium"
                        style="width: ${inputWidth}px"
                        maxlength="${inputLength}">`;
        });
        
        // 创建句子元素
        const sentenceElement = document.createElement('div');
        sentenceElement.className = 'sentence-item text-[clamp(1rem,4vw,1.1rem)] leading-relaxed';
        sentenceElement.innerHTML = processedSentence;
        sentencesContainer.appendChild(sentenceElement);
      });
      
      // 给第一个输入框设置焦点
      const firstInput = document.querySelector('input');
      if (firstInput) {
        firstInput.focus();
        firstInput.classList.add('input-focus');
      }
      
      // 输入框焦点事件
      document.querySelectorAll('input').forEach(input => {
        input.addEventListener('focus', () => {
          input.classList.add('input-focus');
        });
        
        input.addEventListener('blur', () => {
          input.classList.remove('input-focus');
        });
        
        // 自动跳到下一个输入框
        input.addEventListener('input', () => {
          if (input.value.length === input.maxLength) {
            const nextInput = input.nextElementSibling;
            if (nextInput && nextInput.tagName === 'INPUT') {
              nextInput.focus();
            }
          }
        });
      });
      
      // 隐藏成功弹窗
      successModal.classList.add('opacity-0', 'pointer-events-none');
      successModal.querySelector('div').classList.remove('scale-100');
      successModal.querySelector('div').classList.add('scale-95');
    }
    
    // 检查答案
    function checkAnswers() {
      const inputs = document.querySelectorAll('input');
      let allCorrect = true;
      
      inputs.forEach(input => {
        const userAnswer = input.value.trim();
        const correctAnswer = input.dataset.answer;
        
        if (userAnswer === correctAnswer) {
          // 答案正确
          input.classList.remove('border-gray-300', 'border-red-500');
          input.classList.add('border-success');
        } else {
          // 答案错误
          allCorrect = false;
          input.classList.remove('border-gray-300', 'border-success');
          input.classList.add('border-red-500');
          
          // 错误动画
          input.classList.add('animate-shake');
          setTimeout(() => {
            input.classList.remove('animate-shake');
          }, 500);
        }
      });
      
      // 如果全部正确，显示成功弹窗
      if (allCorrect) {
        setTimeout(() => {
          successModal.classList.remove('opacity-0', 'pointer-events-none');
          successModal.querySelector('div').classList.remove('scale-95');
          successModal.querySelector('div').classList.add('scale-100');
        }, 500);
      }
    }
    
    // 事件监听
    checkBtn.addEventListener('click', checkAnswers);
    resetBtn.addEventListener('click', initGame);
    closeModal.addEventListener('click', initGame);
    
    // 初始化游戏
    initGame();
  </script>
</body>
</html>